<template>
  <div class="point">
    <div class="title">
      <h3>合作商点位数Top5</h3>
      <i class="iconfont icon-xiaoxi"></i>
    </div>
    <div class="content">
      <div class="echart"><div class="pieEcharts" ref="pieEchartsRef"></div></div>
      <div class="data">
        <div class="text">
          <div class="subpoint">
            <span>{{ partnerNum }}</span>
            <p>点位数</p>
          </div>
          <div class="subpoint">
            <span>{{ pointNum }}</span>
            <p>合作数</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { partnerCountAPI, nodeCountAPI, nodeCollectAPI } from '@/api'
export default {
  name: 'PointEcharts',
  data() {
    return {
      pointNum: 0,
      partnerNum: 0
    }
  },
  created() {
    this.getPieData()
  },
  methods: {
    async getPieData() {
      const res1 = await partnerCountAPI()
      this.pointNum = res1.data
      const res2 = await nodeCountAPI()
      this.partnerNum = res2.data
      const res3 = await nodeCollectAPI()
      this.getPieEcharts(res3.data)
    },
    getPieEcharts(data) {
      const machart = this.$echarts.init(this.$refs.pieEchartsRef)
      const options = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/> 总占比 : {d}%',
          color: '#333'
        },
        label: {
          alignTo: 'edge',
          formatter: '{b}\n{d}%',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#666'
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: [70, 120],
            center: ['50%', '55%'],
            roseType: 'angle',
            labelLine: {
              smooth: 0.5,
              length: 5,
              length2: 10
            },
            itemStyle: {
              borderRadius: 5
            },
            data: data
          }
        ]
      }
      machart.setOption(options)
      window.addEventListener('resize', () => {
        machart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.point {
  flex: 3;
  height: 353px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 1px 1px 10px rgb(240, 239, 239);
  .content {
    display: flex;
    .echart {
      flex: 5;
      // width: 100%;
      height: 280px;
      .pieEcharts {
        width: 100%;
        height: 100%;
      }
    }
    .data {
      padding: 30px 40px;
      flex: 2;
      .text {
        width: 154px;
        height: 230px;
        padding-top: 47px;
        padding-left: 38px;
        margin-right: 50px;
        background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
          linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
          linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
          linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        .subpoint {
          span {
            height: 33px;
            font-size: 24px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #072074;
            line-height: 33px;
          }
          p {
            height: 17px;
            margin-top: 6px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000412;
            line-height: 17px;
          }
        }
      }
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    h3 {
      font-size: 16px;
      color: #333;
    }
    i {
      color: #5f84ff;
      cursor: pointer;
      font-size: 16px;
    }
  }
}
</style>
